<template>
  <div class="app-container">
    <div style="width:415px;height: 835px;margin-top: -31px;margin-left: -19px;background-color: white">
      <div style="width: 415px;height: 300px">
        <p>车辆信息</p>
        <img :src="vehicles.vehiclePhotoUrl" width="200px" height="200px">
        <p style="color: #1c84c6;margin-left: 50px">{{vehicles.licensePlate}}</p>
      </div>
      <hr>
      <div>
        <p>基本信息</p>
        <img :src="residents.faceImage" class="avatar" alt="图片" style="height: 150px;width: 150px;margin-top: 5px">
        <p>姓名：{{ residents.name }}</p>
        <p style="text-align: left">证件号码：{{ residents.idNumber}}</p>
        <p style="text-align: left">类型：{{ residents.residentTypeId}}</p>
        <p style="text-align: left">性别：{{ residents.gender}}</p>
        <p style="text-align: left">出生日期：{{ birthDate }}</p>
        <p style="text-align: left">年龄：{{ age }}</p>
        <p style="text-align: left">户籍地址：{{ residents.householdAddress}}</p>
        <p style="text-align: left">联系电话：{{ residents.phoneNumber}}</p>
      </div>
    </div>
    <div style="width: 1085px;height: 570px;margin-left: 402px;margin-top: -852px;background-color: white">
      <p>行车轨迹</p>
    </div>
    <div style="width: 1085px;height: 263px;margin-left: 402px;margin-top: -15px;background-color: white">
      <p>出行规律</p>
    </div>
  </div>
</template>

<script>

import {getResidents} from "@/api/system/residents";

export default {

  data() {
    return {
      vehicles: {},
      residents: {},
      // 出生日期
      birthDate: '',
      // 年龄
      age: '',
    };
  },
  created() {
    this.vehicles = this.$route.query.vehicles
    console.log(this.vehicles)
    this.getResidentsById()
  },
  methods: {
    getBirthDateAndAge(idNumber) {
      // 根据身份证号(idNumber)获取出生日期和年龄
      this.birthDate = idNumber.substring(6, 14);
      //2001-10-19
      this.birthDate = this.birthDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3');
      this.age = new Date().getFullYear() - this.birthDate.substring(0, 4);
    },
    // 根据实有人口id 查询实有人口信息
    getResidentsById() {
      getResidents(this.vehicles.populationId).then(res => {
        this.residents = res.data
        this.getBirthDateAndAge(this.residents.idNumber);
      })
    }
  }
};
</script>
<style>

</style>
